<template>
  <div class="components-page">
    <a-form ref="formRef" autocomplete="off" name="basic" :model="formState" :label-col="{ style: 'width:80px' }" :wrapper-col="{ style: 'calc(100% - 80px)' }">
      <a-form-item label="合并报关">
        <a-row justify="space-evenly">
          <a-col :span="12" v-for="(item, index) in formState.waybillNumList" :key="index">
            <div class="waybillNum-div">
              <span style="margin-right: 6px">{{ item }}</span>
              <a-button shape="circle" type="primary" :icon="h(CloseOutlined)" size="small" @click="deleteArr" v-if="changeType === 1" />
            </div>
          </a-col>
        </a-row>
      </a-form-item>

      <!-- 下拉框 -->
      <a-form-item label="计费运单" name="billingWaybillNum" :rules="[{ required: true, message: '请选择计费运单!' }]" v-if="changeType === 1">
        <a-select v-model:value="formState.billingWaybillNum" placeholder="请选择" allowClear>
          <a-select-option v-for="item in formState.waybillNumList" :key="item" :value="item" :label="item">{{ item }}</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="计费运单" v-if="[2, 3].includes(changeType)"> {{ formState.billingWaybillNum }} </a-form-item>

      <a-form-item v-if="changeType === 2">
        <span v-if="activeKey === '2'">取消后将无法恢复，是否确认取消?</span>
        <span v-if="activeKey === '3'">取消后，将默认取消所有已合并运单，且该运单需重新报价，是否确认取消?</span>
      </a-form-item>
    </a-form>

    <div class="operation-btn-wrapper">
      <a-button :loading="loading" type="primary" @click="onSubmit" v-debounce v-if="changeType === 1">保 存</a-button>

      <a-button :loading="loading" type="primary" @click="changeTypeHandle" v-debounce v-if="changeType === 3">取消合并报关</a-button>

      <a-button @click="resetForm">取 消</a-button>

      <a-button :loading="loading" type="primary" @click="cancelSubmitHandle" v-debounce v-if="changeType === 2">确定</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { toRefs, watch, h } from "vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import { CloseOutlined } from "@ant-design/icons-vue";
import { cloneDeep } from "lodash";
import { getCombinedWaybillsApi } from "@/api/waybillManagement/businessWaybill/waybillQuotation";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    type: number; //1合并  2取消  3详情
    passData: Array<WaybillQuotation.ListRows>;
    activeKey?: string;
  }>(),
  {
    activeKey: "2"
  }
);
const emit = defineEmits<{
  (e: "submit"): void;
  (e: "update:visible", visible: boolean): void;
}>();

const { visible, passData, type, activeKey } = toRefs(props);
const { formState, loading, formRef, changeType } = InitHook();
const { onSubmit, resetForm, deleteArr, cancelSubmitHandle } = OperationHook({
  passData,
  formState,
  loading,
  formRef,
  emit,
  type
});

const changeTypeHandle = () => {
  changeType.value = 2;
};

//初始化数据
const init = () => {
  changeType.value = type.value;

  if (type.value === 1) {
    formState.waybillNumList = cloneDeep(passData.value.map((t: any) => t.waybillNum));
  } else {
    getCombinedWaybillsApi({ billingWaybillNum: passData.value[0].billingWaybillNum }).then((res: any) => {
      const { code, data } = res;
      if (code === 200) {
        Object.assign(formState, data);
      }
    });
  }
};

watch(
  () => visible.value,
  v => {
    if (v) {
      init();
    } else {
      resetForm();
    }
  }
);

init();
</script>
<style lang="stylus" scoped>
.components-page {
  background-color: #fff;

    .waybillNum-div{
      display:flex;
      align-items:center;
      :deep(.ant-btn) {
       width: 15px;
       height: 15px;
       min-width: 15px;

       background: #fe8100;
       border-color:white;
      }

      :deep(.anticon svg){
        font-size:9px;
      }
    }
  .operation-btn-wrapper {
    :deep(.ant-btn) {
      margin-right: 16px;
    }
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }
}
</style>
